<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <test-component></test-component> -->
        <my-component></my-component>
        <component2></component2>
    </div>
    <script src="../day06/lib/vue.js"></script>
    <!-- //   <script>
// 1.全局组件的注册及使用
        // Vue.component('testComponent', {
        //     data() {
        //         return {
        //             name: '张三',
        //             age: 23
        //         }
        //     },
        //     template: `
        //     <div>
        //         <h1>你好，我是test的component</h1>
        //         <div>{{name}}</div>
        //         <div>{{age}}</div>
        //     </div>
        //     `

        // })
        // new Vue({
        //     el: '#app',
        // })
  </script> -->


    <!-- 2. 局部组件的注册及使用 -->
    <script>
        let component2 = {
            data() {
                return {
                    name: '李四',
                    sex: 'femal',
                    age: 0
                }
            },
            template:
                `
            <div>
                <div>大家好，我叫{{name}},我是{{sex}},我今年{{age}}岁了</div>
                <button @click="ageAdd">点我增加年龄</button>
                </div>
            `,
            methods: {
                ageAdd() {
                    this.age++
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                component2,
                'my-component': {
                    data() {
                        return {
                            name: '张三',
                            age: 23
                        }
                    },
                    template: `
            <div>
            <h1>我是局部组件</h1>
            <div>姓名：{{name}}</div>
            <div>年龄：{{age}}</div>
                </div>
            `
                }
            }
        })
    </script>
</body>

</html>